<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带闹铃数字时钟</title>

<!-- The main CSS file -->
<link href="css/style.css" rel="stylesheet" />

<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>

<body>
<div>
	<iframe style="" height="60" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12"></iframe>
</div>

<div align="center">
	<a href="lockScreen.html"><h3>欢迎使用智能电子钟表</h3></a>
</div>
<div id="clock" class="light">
	<div class="display">
		<div class="weekdays"></div>
		<div class="ampm"></div>
		<div class="alarm"></div>
		<div class="digits"></div>
	</div>
</div>

<div class="button-holder">
	<a id="switch-theme" class="button">切换主题</a>
	<a class="alarm-button"></a>
</div>

<!-- The dialog is hidden with css -->
<div class="overlay">

	<div id="alarm-dialog">

		<h2>设置闹钟</h2>

		<label class="hours">
			时
			<input type="number" value="0" min="0" />
		</label>

		<label class="minutes">
			分
			<input type="number" value="0" min="0" />
		</label>

		<label class="seconds">
			秒
			<input type="number" value="0" min="0" />
		</label>

		<div class="button-holder">
			<a id="alarm-set" class="button blue">设置</a>
			<a id="alarm-clear" class="button red">清除</a>
		</div>

		<a class="close"></a>

	</div>

</div>

<div class="overlay">

	<div id="time-is-up">

		<h2>Time&#39;s up!</h2>

		<div class="button-holder">
			<a class="button blue">关闭</a>
		</div>

	</div>

</div>

<audio id="alarm-ring" preload>
	<source src="audio/ticktac.mp3" type="audio/mpeg" />
	<source src="audio/ticktac.ogg" type="audio/ogg" />
</audio>


<!-- JavaScript Includes -->
<script src="js/jss/jquery.min.js"></script>
<script src="js/jss/moment.min.js"></script>
<script src="js/jss/script.js"></script>

</body>
</html>
